<template>
  <div class="tools-container">
    <div class="right-tools" @mousedown.stop>
      <el-dropdown class="margin-right-5" placement="bottom-start">
        <el-button type="text" title="预览报表">
          <i class="ureport ureport-preview"></i><i class="el-icon-caret-bottom" style="font-size:9px;"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="doPreview(false)">
            <i class="ureport ureport-preview"></i> 预览
          </el-dropdown-item>
          <el-dropdown-item @click.native="doPreview(true)">
            <i class="el-icon-yrt-chaxun"></i> 分页预览
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="margin-right-5" placement="bottom-start">
        <el-button type="text" title="保存">
          <i class="ureport ureport-save"></i><i class="el-icon-caret-bottom" style="font-size:9px;"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="saveData">
            <i class="ureport ureport-save"></i> 保存
          </el-dropdown-item>
          <el-dropdown-item @click.native="saveAs">
            <i class="el-icon-yrt-baocun"></i> 另存为
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button type="text" size="medium" icon="ureport ureport-open" title="打开报表文件" @click="showOpenDialog=true"></el-button>
      <el-button type="text" size="medium" icon="ureport ureport-import" title="导入Excel模板文件" @click="showImportDialog=true"></el-button>
      <el-button type="text" size="medium" icon="ureport ureport-redo" title="还原"></el-button>
      <el-button type="text" size="medium" icon="ureport ureport-undo" title="撤销"></el-button>
      <el-button type="text" size="medium" icon="ureport ureport-merge" title="合并/拆分单元格" @click="borderTool.mergeCell(designer)"></el-button>
      <el-dropdown class="margin-right-5" placement="bottom-start">
        <el-button type="text" title="左右对齐">
          <i :class="'ureport ureport-align' + textAlignValue"></i><i class="el-icon-caret-bottom" style="font-size:9px;"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item in propertyHelper.alignList" :key="item.value" @click.native="alignTool.textAlign(designer, item.value)">
            <i :class="'ureport ureport-align'+item.value"></i> {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="margin-right-5" placement="bottom-start">
        <el-button type="text" title="上下对齐">
          <i :class="'ureport ureport-align' + verticalAlignValue"></i><i class="el-icon-caret-bottom" style="font-size:9px;"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item in propertyHelper.valignList" :key="item.value" @click.native="alignTool.verticalAlign(designer, item.value)">
            <i :class="'ureport ureport-align'+item.value"></i> {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="margin-right-5" placement="bottom-start">
        <el-button type="text" title="边框线">
          <i class="ureport ureport-no-border"></i><i class="el-icon-caret-bottom" style="font-size:9px;"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="borderTool.setBorder(designer)">
            <i class="ureport ureport-full-border"></i> 所有边框
          </el-dropdown-item>
          <el-dropdown-item @click.native="borderTool.setBorder(designer,'none')">
            <i class="ureport ureport-no-border"></i> 无框线
          </el-dropdown-item>
          <el-dropdown-item @click.native="borderTool.setBorder(designer,'left')">
            <i class="ureport ureport-left-border"></i> 左框线
          </el-dropdown-item>
          <el-dropdown-item @click.native="borderTool.setBorder(designer,'right')">
            <i class="ureport ureport-right-border"></i> 右框线
          </el-dropdown-item>
          <el-dropdown-item @click.native="borderTool.setBorder(designer,'top')">
            <i class="ureport ureport-top-border"></i> 上框线
          </el-dropdown-item>
          <el-dropdown-item @click.native="borderTool.setBorder(designer,'bottom')">
            <i class="ureport ureport-bottom-border"></i> 下框线
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="openCustomBorder">
            <i class="ureport ureport-full-border"></i> 自定义框线
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="margin-right-5" placement="bottom-start">
        <el-button type="text" title="字体">
          <span>{{ fontFamily }}</span><i class="el-icon-caret-bottom" style="font-size:9px;"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item in toolHelper.fontFamilyList" :key="item" @click.native="styleTool.setFontFamily(designer, item)">{{ item }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="margin-right-5" placement="bottom-start">
        <el-button type="text" title="字体大小">
          <span>{{ fontSize }}</span><i class="el-icon-caret-bottom" style="font-size:9px;"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item in toolHelper.fontSizeList" :key="item" @click.native="styleTool.setFontSize(designer, item)">{{ item }}</el-dropdown-item>
          <el-dropdown-item divided>自定义大小</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button type="text" size="medium" icon="ureport ureport-bold" title="加粗" @click="styleTool.setBold(designer)"></el-button>
      <el-button type="text" size="medium" icon="ureport ureport-italic" title="斜体" @click="styleTool.setItalic(designer)"></el-button>
      <el-button type="text" size="medium" icon="ureport ureport-underline" title="下划线" class="margin-right-5" @click="setUnderline()"></el-button>
      <div class="color-picker font-color-picker">
        <i class="ureport ureport-forecolor"></i>
        <el-color-picker v-model="tool.forecolor" show-alpha size="mini" :predefine="toolHelper.predefineColors" title="字体颜色" @change="styleTool.setFontColor(designer, tool.forecolor, false)"></el-color-picker>
      </div>
      <div class="color-picker back-color-picker">
        <i class="ureport ureport-bgcolor"></i>
        <el-color-picker v-model="tool.bgcolor" show-alpha size="mini" :predefine="toolHelper.predefineColors" title="背景颜色" @change="styleTool.setFontColor(designer, tool.bgcolor, true)"></el-color-picker>
      </div>
      <el-button type="text" size="medium" icon="ureport ureport-crosstab" title="斜线表头" @click="slashTool.buildSlash(designer)"></el-button>
      <el-button type="text" size="medium" icon="ureport ureport-image" title="图片" @click="imageTool.builderImage(designer)"></el-button>
      <el-dropdown class="margin-right-5" placement="bottom-start">
        <el-button type="text" title="二维码">
          <i class="ureport ureport-qrcode"></i><i class="el-icon-caret-bottom" style="font-size:9px;"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="zxingTool.buildQrcode(designer)">
            <i class="ureport ureport-qrcode"></i> 二维码
          </el-dropdown-item>
          <el-dropdown-item @click.native="zxingTool.builderBarcode(designer)">
            <i class="ureport ureport-barcode"></i> 一维条码
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="margin-right-5" placement="bottom-start">
        <el-button type="text" title="图表">
          <i class="ureport ureport-pie"></i><i class="el-icon-caret-bottom" style="font-size:9px;"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="chartTool.builderChart(designer, 'pie')">
            <i class="ureport ureport-pie"></i> 饼状图
          </el-dropdown-item>
          <el-dropdown-item @click.native="chartTool.builderChart(designer, 'doughnut')">
            <i class="ureport ureport-doughnut"></i> 圆环图
          </el-dropdown-item>
          <el-dropdown-item @click.native="chartTool.builderChart(designer, 'line')">
            <i class="ureport ureport-line"></i> 曲线图
          </el-dropdown-item>
          <el-dropdown-item @click.native="chartTool.builderChart(designer, 'bar')">
            <i class="ureport ureport-bar"></i> 柱状图
          </el-dropdown-item>
          <el-dropdown-item @click.native="chartTool.builderChart(designer, 'horizontalBar')">
            <i class="ureport ureport-horizontal-bar"></i> 水平柱状图
          </el-dropdown-item>
          <el-dropdown-item @click.native="chartTool.builderChart(designer, 'area')">
            <i class="ureport ureport-area"></i> 面积图
          </el-dropdown-item>
          <el-dropdown-item @click.native="chartTool.builderChart(designer, 'radar')">
            <i class="ureport ureport-radar"></i> 雷达图
          </el-dropdown-item>
          <el-dropdown-item @click.native="chartTool.builderChart(designer, 'polarArea')">
            <i class="ureport ureport-polar"></i> 极坐标图
          </el-dropdown-item>
          <el-dropdown-item @click.native="chartTool.builderChart(designer, 'scatter')">
            <i class="ureport ureport-scatter"></i> 散点图
          </el-dropdown-item>
          <el-dropdown-item @click.native="chartTool.builderChart(designer, 'bubble')">
            <i class="ureport ureport-bubble"></i> 气泡图
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button type="text" size="medium" icon="ureport ureport-setting" title="设置" @click="showPageDialog=true"></el-button>
      <el-button type="text" size="medium" icon="el-icon-yrt-liebiao2" title="切换到查询表单设计页" @click="openSearchDialog()"></el-button>
      <el-button type="text" size="medium" icon="el-icon-yrt-yanjing" title="查看代码" @click="showCodeDialog=true"></el-button>
      <div class="file-info">{{ designer.fileName }}</div>
    </div>

    <!--保存对话框-->
    <save-dialog ref="sourceDialog" :visible.sync="showSaveDialog" :designer="designer">
    </save-dialog>

    <!--打开文件对话框-->
    <open-dialog ref="sourceDialog" :visible.sync="showOpenDialog" :designer="designer">
    </open-dialog>

    <!--打开文件对话框-->
    <search-design-dialog ref="sourceDialog" :visible.sync="showSearchDialog" :designer="designer">
    </search-design-dialog>

    <!--边框对话框-->
    <border-dialog ref="borderDialog" :visible.sync="showBorderDialog" :designer="designer">
    </border-dialog>

    <!--导入对话框-->
    <import-dialog ref="borderDialog" :visible.sync="showImportDialog" :designer="designer">
    </import-dialog>

    <!--页面对话框-->
    <page-dialog ref="pageDialog" :visible.sync="showPageDialog" :designer="designer">
    </page-dialog>

    <!--代码对话框-->
    <code-dialog ref="pageDialog" :visible.sync="showCodeDialog" :designer="designer">
    </code-dialog>
  </div>
</template>

<script>
import toolHelper from "../tools/toolHelper.js";
import alignTool from "../tools/alignTool.js";
import borderTool from "../tools/borderTool.js";
import styleTool from "../tools/styleTool.js";
import slashTool from "../tools/slashTool.js";
import imageTool from "../tools/imageTool.js";
import zxingTool from "../tools/zxingTool.js";
import chartTool from "../tools/chartTool.js";
import saveDialog from "./saveDialog";
import openDialog from "./openDialog";
import borderDialog from "./borderDialog";
import importDialog from "./importDialog";
import pageDialog from "./pageDialog";
import codeDialog from "./codeDialog";
import searchDesignDialog from "../searchDesigner/searchIndex";
import { tableToXml, checkSelection } from "../util/Utils.js";
import eventBus from "@/utils/eventBus";
import propertyHelper from "./propertyHelper.js";

export default {
  components: {
    saveDialog,
    openDialog,
    searchDesignDialog,
    borderDialog,
    importDialog,
    pageDialog,
    codeDialog
  },
  props: {
    designer: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data () {
    return {
      alignTool,
      borderTool,
      styleTool,
      slashTool,
      imageTool,
      zxingTool,
      chartTool,
      propertyHelper,
      toolHelper,
      tool: {
        bgcolor: "#ffffff",
        forecolor: "#f8f8f8"
      },
      textAlignValue: "left", // 左右对齐
      verticalAlignValue: "middle", // 上下对齐
      fontFamily: "宋体",
      fontSize: "10",
      // 显示保存对话框
      showSaveDialog: false,
      // 显示打开对话框
      showOpenDialog: false,
      // 显示查询对话框
      showSearchDialog: false,
      // 显示边框对话框
      showBorderDialog: false,
      // 显示导入对话框
      showImportDialog: false,
      // 显示页面设置对话框
      showPageDialog: false,
      // 显示代码对话框
      showCodeDialog: false,
      // 选中模块
      moduleNode: {}
    };
  },
  watch: {
    "designer.cellDef": {
      handler: function () {
        this.dataInit();
      },
      deep: true
    }
  },
  mounted () {
    this.bindEvent();
  },
  methods: {
    // 事件处理
    bindEvent () {
      // 左侧导航改变事件
      eventBus.$on("bi-left-node-change", ({ node, data }) => {
        this.moduleNode = data;
      });
    },
    // 数据初始化
    dataInit () {
      const { cellDef } = this.designer;
      if (!cellDef) return;

      this.textAlignValue = cellDef.cellStyle.align;
      this.verticalAlignValue = cellDef.cellStyle.valign;
      this.fontFamily = cellDef.cellStyle.fontFamily || "宋体";
      this.fontSize = cellDef.cellStyle.fontSize || "10";
    },
    // 保存报表
    saveData () {
      const { prefix, fileFullName, fileName } = this.designer;
      if (fileFullName.indexOf(prefix) >= 0) {
        this.designer.save(fileName);
      } else {
        this.showSaveDialog = true;
      }
    },
    // 另存为报表
    saveAs () {
      this.showSaveDialog = true;
    },
    // 预览报表
    doPreview (withPaging) {
      const { context } = this.designer;
      const userInfo = this.common.getUserInfo();
      let targetUrl = this.designer.server + "/html/preview?_u=p&accessToken=" + userInfo.accessToken;
      if (withPaging) {
        targetUrl += "&_i=1&_r=1";
      }
      const content = tableToXml(context);
      const url = "/designer/savePreviewData";
      const data = {
        content
      };
      this.designer.ajax(url, data, res => {
        const newWindow = window.open(targetUrl, "_blank");
        newWindow.focus();
      });
    },
    // 打开查询设计区
    openSearchDialog () {
      if (!this.moduleNode.bI_Id) {
        this.$message.error("请选择模块后再执行设计操作！");
        return;
      }
      if (this.designer.fileName !== this.moduleNode.label) {
        this.$message.error("左侧选中模块和当前设计模板名称不匹配！");
        return;
      }

      this.showSearchDialog = true;
    },
    // 打开自定义边框
    openCustomBorder () {
      const { context } = this.designer;
      if (!checkSelection(context)) {
        return;
      }
      this.showBorderDialog = true;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/iconfont.css";
.right-tools {
  border-bottom: 2px solid #e4e7ed;
  .color-picker {
    display: inline-block;
    position: relative;
    margin-right: 5px;
    color: #c19b62;
    ::v-deep .el-color-picker__icon {
      display: none !important;
    }

    ::v-deep .el-icon-arrow-down {
      display: none !important;
    }
    ::v-deep .el-color-picker__color-inner {
      position: relative !important;
      height: 20% !important;
      top: 16px;
      display: block !important;
    }
    ::v-deep .el-color-picker__trigger {
      border: 0px solid #e6e6e6;
      padding: 0px;
      height: 16px;
      width: 16px;
    }
    ::v-deep .el-color-picker__color {
      border: 0px solid #e6e6e6;
      padding: 0px;
    }
    ::v-deep .el-color-picker__color.is-alpha {
      background-image: none !important;
    }
    .ureport {
      position: absolute;
      top: 5px;
      font-size: 12px;
      left: 3px;
      -webkit-transform-origin-x: 0;
      -webkit-transform: scale(0.8);
    }
  }
  .back-color-picker {
    .ureport {
      top: 4px;
      -webkit-transform: scale(1);
    }
  }
  .file-info {
    float: right;
    line-height: 35px;
    color: #606266;
  }
}
</style>
